import React, { useRef } from 'react';
import {
    View,
    TouchableOpacity,
    Animated,
    StyleSheet,
    Platform,
} from 'react-native';

const CustomGeometryView = (props: any) => {
    const {
        children,
        viewID,
        onGeometryViewClick = () => { },
        style,
    } = props;
    const scaleAnim = useRef(new Animated.Value(1)).current;

    const handlePressIn = () => {
        Animated.spring(scaleAnim, {
            toValue: 0.97,
            friction: 3,
            useNativeDriver: true,
        }).start();
    };

    const handlePressOut = () => {
        Animated.spring(scaleAnim, {
            toValue: 1,
            useNativeDriver: true,
        }).start();
    };

    return (
        <Animated.View
            style={[styles.container, style, { transform: [{ scale: scaleAnim }] }]}>
            <TouchableOpacity
                activeOpacity={0.8}
                onPressIn={handlePressIn}
                onPressOut={handlePressOut}
                onPress={onGeometryViewClick}
                style={styles.touchableArea}>
                <View style={styles.content}>{children}</View>
            </TouchableOpacity>
        </Animated.View>
    );
};

const styles = StyleSheet.create({
    container: {
        borderRadius: 8,
        overflow: 'hidden',
    },
    touchableArea: {
        flex: 1,
    },
    content: {
        flexDirection: 'row',
        alignItems: 'center',
    },
});

export default CustomGeometryView;
